<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-08-04 12:46:25
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-09 18:30:13
 * @FilePath: \react\07.组件实例三大属性2_props\5.函数式组件使用props.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>props</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入pro-types, 用于对组件传入props的标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        /* 此处一定要写babel */
			//1.创建组件
			// class Person extends React.Component {
            //     //构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访props
            //     constructor(props){                    
            //         super(props)
            //         console.log("constructor",this.props)
            //         // console.log("props",props) 
            //     }
                
			// 	//对组件标签传入的props数据类型限制
			// 	static propTypes = {
			// 		name: PropTypes.string.isRequired, //限制name必传且字符串类型,
			// 		age: PropTypes.number, //限制age字段number类型
			// 		gender: PropTypes.string, //限制gender字符串类型
			// 		speak: PropTypes.func, //限制speak字段 函数类型
			// 	}
			// 	//对组件传入props未传入的属性进行默认值设置
			// 	static defaultProps = {
			// 		gender: '未知',
			// 		age: 18,
			// 	}
            //     state ={
                    
            //     }
			// 	render() {
			// 		const { name, age, gender } = this.props
			// 		//props 是只读的
			// 		//this.props.name = 'jsck' TypeError: Cannot assign to read only property 'name' of object '#<Object>'
			// 		return (
			// 			<ul>
			// 				<li>姓名:{name}</li>
			// 				<li>性别:{gender}</li>
			// 				<li>年龄:{age + 1}</li>
			// 			</ul>
			// 		)
			// 	}
			// }
            function Person ( ){
                console.log("first",props)
                const {name,gender,age} = props
                return (
						<ul>
							<li>姓名:{name}</li>
							<li>性别:{gender}</li>
							<li>年龄:{age + 1}</li>
						</ul>
					)
            } 
            	//对组件标签传入的props数据类型限制
				Person.propTypes = {
					name: PropTypes.string.isRequired, //限制name必传且字符串类型,
					age: PropTypes.number, //限制age字段number类型
					gender: PropTypes.string, //限制gender字符串类型
					speak: PropTypes.func, //限制speak字段 函数类型
				}
				//对组件传入props未传入的属性进行默认值设置
				Person.defaultProps = {
					gender: '未知',
					age: 18,
				}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(
				<Person name="tom" gender="男"  age={20}/>,
				document.getElementById('test')
			)
			
		</script>
</body>

</html>